<template>
	<picker
		class="_cityPicker"
		mode="multiSelector"
		:value="selectedIndex"
		:disabled="disabled"
		range-key="label"
		:range="showArr"
		@change="pickerChange"
		@columnchange="columnchange"
	>
		<view class="flex align-center">
			<view class="cityPickerText" :style="{ textAlign: textAlign }" :class="[disabled ? 'formDisabledColor' : '', showText ? '' : 'formDisabledColor']">
				{{ showText || '请选择' }}
			</view>
			<view><u-icon name="arrow-down-fill" color="#c0c4cc" size="28"></u-icon></view>
		</view>
	</picker>
</template>

<script>
import { findIndex2 } from '@/utils/tools.js';
import areaList from '@/utils/areaList.js';
let areaTree = [];
export default {
	props: {
		value: {
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		textAlign: {
			type: String,
			default: 'right'
		}
	},
	data() {
		return {
			showArr: [],
			showText: '',
			selectedIndex: [0, 0, 0]
		};
	},
	watch: {
		value: {
			deep: true,
			immediate: true,
			handler(newValue, oldValue) {
				if (newValue && newValue != oldValue) {
					this.$nextTick(() => {
						this.setDefaultMobile(newValue);
					});
				}
			}
		}
	},
	created() {
		this.buildTree();
		this.showArr = [areaTree, areaTree[0].children, areaTree[0].children[0].children];
	},
	methods: {
		pickerChange(e) {
			console.log('change', e, this.selectedIndex);
			let selectedIndex = e.detail.value;
			let selectedKeys = [this.showArr[0][selectedIndex[0]].value, this.showArr[1][selectedIndex[1]].value, this.showArr[2][selectedIndex[2]].value];
			let selectedText = [this.showArr[0][selectedIndex[0]].label, this.showArr[1][selectedIndex[1]].label, this.showArr[2][selectedIndex[2]].label];
			this.showText = selectedText.join('/');
			this.$emit('city-change', {
				key: selectedKeys,
				label: selectedText
			});
		},
		columnchange(e) {
			console.log('column', e);
			let column = e.detail.column;
			let index = e.detail.value;
			switch (column) {
				case 0: {
					this.showArr = [areaTree, [], []];
					this.$forceUpdate();
					this.$nextTick(() => {
						this.showArr = [areaTree, areaTree[index].children, areaTree[index].children[0].children];
						this.selectedIndex = [index, 0, 0];
						this.$forceUpdate();
					});
					break;
				}
				case 1: {
					let curIndex = this.selectedIndex;
					this.showArr = [areaTree, areaTree[curIndex[0]].children, []];
					this.$forceUpdate();
					this.$nextTick(() => {
						this.showArr = [areaTree, areaTree[curIndex[0]].children, areaTree[curIndex[0]].children[index].children];
						this.selectedIndex = [curIndex[0], index, 0];
						this.$forceUpdate();
					});
					break;
				}
				case 2: {
					this.selectedIndex[2] = index;
					break;
				}
			}
		},
		setDefaultMobile(value) {
			let arr = findIndex2(areaTree, value);
			console.log('default', arr, value);
			let indexArr = [];
			let textArr = [];
			arr.forEach(e => {
				indexArr.push(e.index);
				textArr.push(e.Name);
			});
			this.showText = textArr.join('/');
			this.selectedIndex = indexArr;
			if (indexArr.length > 2) this.showArr = [areaTree, areaTree[indexArr[0]].children, areaTree[indexArr[0]].children[indexArr[1]].children];
		},
		buildTree() {
			//构建 区 缓存
			let countyObj = {};
			Object.keys(areaList.county_list).forEach(key => {
				let code = `${key}`.substr(0, 4) + '00';
				if (countyObj[code]) {
					countyObj[code].push({
						value: key,
						label: areaList.county_list[key]
					});
				} else {
					countyObj[code] = [
						{
							value: key,
							label: areaList.county_list[key]
						}
					];
				}
			});
			//构建 市、区 缓存
			let cityObj = {};
			Object.keys(areaList.city_list).forEach(key => {
				let fillZero = new Array(`${key}`.length - 2);
				fillZero.fill('0');
				let code = `${key}`.substr(0, 2) + fillZero.join('');
				if (cityObj[code]) {
					cityObj[code].push({
						value: key,
						label: areaList.city_list[key],
						children: countyObj[key]
					});
				} else {
					cityObj[code] = [
						{
							value: key,
							label: areaList.city_list[key],
							children: countyObj[key]
						}
					];
				}
			});
			let arr = [];
			Object.keys(areaList.province_list).forEach(key => {
				arr.push({
					value: key,
					label: areaList.province_list[key],
					children: cityObj[key]
				});
			});
			areaTree = arr;
		}
	}
};
</script>

<style lang="less">
._cityPicker {
	.cityPickerText {
		line-height: 100rpx;
		font-size: 28rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
		// text-align: right;
		min-height: 100rpx;
	}
}
</style>
